<template>
    <div class="info">
        <div class="card">
            <div class="card-header d-flex align-items-center gap-3">
                <img src="../../../assets/images/info.svg" alt="">
                <span>个人资料</span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mt-3">
                        <el-form :model="userInfo" :rules="rules" ref="userForm" label-width="120px"
                            class="demo-ruleForm">
                            <!-- 头像上传 -->
                            <el-form-item label="头像" prop="avatar">
                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>

                            <!-- 手机号 -->
                            <el-form-item label="手机号" prop="phone">
                                <el-input v-model="userInfo.phone" placeholder="请输入手机号码"></el-input>
                            </el-form-item>

                            <!-- 当前密码 -->
                            <el-form-item label="当前密码" prop="currentPassword">
                                <el-input type="password" v-model="userInfo.currentPassword"
                                    placeholder="请输入当前密码"></el-input>
                            </el-form-item>

                            <!-- 新密码 -->
                            <el-form-item label="新密码" prop="newPassword">
                                <el-input type="password" v-model="userInfo.newPassword"
                                    placeholder="请输入新密码"></el-input>
                            </el-form-item>

                            <!-- 确认新密码 -->
                            <el-form-item label="确认新密码" prop="confirmNewPassword">
                                <el-input type="password" v-model="userInfo.confirmNewPassword"
                                    placeholder="请再次输入新密码"></el-input>
                            </el-form-item>

                            <!-- 提交按钮 -->


                            <el-form-item>
                                <div class="btn d-flex justify-content-between align-items-center">
                                    <div class="save-btn" @click="submitForm('userForm')"> 保存修改 </div>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="quit-btn">取消</div>
                                </div>

                            </el-form-item>

                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Info',
    data() {
        const validateConfirmPassword = (rule, value, callback) => {
            if (value !== this.userInfo.newPassword) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        };
        return {
            userInfo: {
                avatar: '',
                phone: '',
                currentPassword: '',
                newPassword: '',
                confirmNewPassword: ''
            },
            rules: {
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur' }
                ],
                currentPassword: [
                    { required: true, message: '请输入当前密码', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],
                confirmNewPassword: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { validator: validateConfirmPassword, trigger: 'blur' }
                ]
            }
        }
    },

    methods: {
        handleAvatarSuccess(res, file) {
            this.userInfo.avatar = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPGorPNG = ['image/jpeg', 'image/png'].includes(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPGorPNG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPGorPNG && isLt2M;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 这里添加你的保存逻辑
                    console.log('User Info:', this.userInfo);
                    alert('保存成功!');
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>
.card {
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0;
}

.card-header {
    height: 60px;
    background-color: white;
    color: #333;
    font-size: 16px;
}

.card-header img {
    width: 18px;
}

.card-body {
    padding: 0;
}

:deep(.avatar-uploader .el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

:deep(.avatar-uploader .el-upload:hover) {
    border-color: #409EFF;
}

:deep(.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

:deep(.el-form-item) {
    width: 80%;
}

.btn {
    width: 80%;
}

.save-btn {
    width: 70px;
    height: 30px;
    background: #ff9003;
    color: white;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    line-height: 30px;
}

.quit-btn {
    width: 50px;
    height: 30px;
    color: #999;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    border: 1px solid rgba(0, 0, 0, .2);
    cursor: pointer;
}
</style>